<template>
	<view style="padding-bottom: 80rpx;">
		<view class="nav">
			<u-tabs :current="check - 1" :itemStyle="{ width:'25%',height:'80rpx'}"
				:activeStyle="{ color: '#E84E22' , fontSize:'32rpx' }" lineColor='#E84E22'
				:inactiveStyle="{ color: '#666666',fontSize: '28rpx' }" :list="processStatusList"
				@click="click"></u-tabs>
		</view>
		<view style="margin-top: 120rpx;">

		</view>
		<view class="noteBox" v-for="deskApply in deskApplyList" :key="deskApply.id">
			<view class="title">
				<view class="titleL">
					<text>{{ deskApply.type === 0 ? '申请桌牌' : '申请补牌'}}</text>
				</view>
				<view class="titleR">
					<text class="orderNo">{{ deskApply.no }}</text><text
						class="icon">{{ findProcessStatus(deskApply.processStatus) }}</text>
				</view>
			</view>
			<view class="title noborder" v-if="deskApply.applyNum">
				<view class="titleL">
					申请数量:
				</view>
				<view class="titleR2">
					{{ deskApply.applyNum }}
				</view>
			</view>
			<view class="noBox" v-if="deskApply.deskNums">
				<view class="noLi" v-for="deskNum in deskApply.deskNums" :key="deskNum">
					<image class="liImg" src="@/static/images/icon/chekc.png"></image>
					<view class="liTxt">
						{{ deskNum }}号
					</view>
				</view>
			</view>
			<view class="title">
				<view class="titleL">
					申请原因:
				</view>
				<view class="titleR2">
					{{ deskApply.reason }}
				</view>
			</view>
			<view class="title">
				<view class="titleL" v-if="deskApply.type==1">
					已选{{ deskApply.deskNums.length }}个
				</view>
				<view class="titleR textEnd">
					{{ parseTime(deskApply.createTime) }}
				</view>
			</view>
			<view class="deleBox" @click="deleteDeskApply(deskApply.id)" v-if="deskApply.processStatus==4||deskApply.processStatus==5">
				<view class="dele">
					删除订单
				</view>
			</view>
			<view class="deleBox" @click="harvest(deskApply.id)" v-if="deskApply.processStatus==3">
				<view class="dele2">
					收货
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		getDeskApplyPage,
		deleteDeskApply,
		delivery
	} from "@/api/desk/desk.js"
	import {
		parseTime
	} from "@/utils/ruoyi"
	export default {
		data() {
			return {
				processStatusList: [{
					name: '全部',
					type: null
				}, {
					name: '制作中',
					type: 1
				}, {
					name: '待收货',
					type: 3
				}, {
					name: '已完成',
					type: 5
				}],
				processStatusListAll: [{
					name: '待审核',
					type: 0
				}, {
					name: '制作中',
					type: 1
				}, {
					name: '待发货',
					type: 2
				}, {
					name: '配送中',
					type: 3
				}, {
					name: '审核不通过',
					type: 4
				}, {
					name: '已完成',
					type: 5
				}],
				check: 1,
				deskApplyList: [],
				queryParams: {
					processStatus: null,
					pageNo: 1,
					pageSize: 10
				},
				total: 0
			}
		},
		//触底加载
		onReachBottom() {
			if (this.deskApplyList.length === this.total) {
				uni.showToast({
					title: '没有更多了',
					icon: "none"
				})
			} else {
				this.queryParams.pageNo += 1
				this.getData()
			}
		},
		methods: {
			parseTime(time) {
				return parseTime(time)
			},
			getData() {
				let that = this
				uni.showLoading({
					title: '加载中',
					mask: true
				})
				getDeskApplyPage(this.queryParams).then(response => {
					uni.hideLoading()
					that.total = response.data.total
					if (that.deskApplyList.length < response.data.total) {
						that.deskApplyList = that.deskApplyList.concat(response.data.list)
					} else {
						that.deskApplyList = response.data.list;
					}
				})
			},
			click(item) {
				this.queryParams.processStatus = item.type
				this.queryParams.pageNo = 1
				this.total = 0
				this.deskApplyList = []
				this.getData()
			},
			findProcessStatus(type) {
				return this.processStatusListAll.find(item => item.type === type).name
			},
			//桌牌收货
			harvest(id){
				let that = this
				uni.showLoading({
					title: '加载中',
					mask: true
				})
				let data = {
					id:id
				}
				// console.log(data)
				delivery(data).then(response => {
					uni.hideLoading()
					uni.$u.toast('收货成功')
					that.getData()
				})
			},
			deleteDeskApply(id) {
				let that = this
				uni.showModal({
					title: '提示',
					content: '确认删除吗？',
					success: function(res) {
						if (res.confirm) {
							deleteDeskApply(id).then(res => {
								if (res.code === 0) {
									uni.showToast({
										title: '删除成功',
										duration: 2000
									});
									that.getData()
								}
							})
						}
					}
				});

			}
		},
		mounted() {
			this.getData()
		}
	}
</script>

<style>
	.nav {
		width: 750rpx;
		height: 100rpx;
		background-color: white;
		border-top: 2rpx solid #F1F1F1;
		position: fixed;
		top: 0;
		z-index: 1;
	}

	.noteBox {
		width: 690rpx;
		/* height: 454rpx; */
		background-color: #FFFFFF;
		border-radius: 20rpx;
		margin: 20rpx auto 0 auto;
		padding-bottom: 40rpx;
	}

	.title {
		width: 630rpx;
		height: 100rpx;
		line-height: 100rpx;
		margin: 0 auto;
		display: flex;
		justify-content: space-between;
		border-bottom: 2rpx solid #F1F1F1;
	}

	.titleL {
		width: 125rpx;
		height: 100rpx;
		font-size: 28rpx;
		color: #333333;
	}

	.titleR {
		width: 400rpx;
		height: 100rpx;
	}

	.orderNo {
		font-size: 28rpx;
		color: #666666;
	}

	.icon {
		font-size: 24rpx;
		color: #E84E22;
		margin-left: 30rpx;
	}

	.noborder {
		border: none;
	}

	.titleR2 {
		width: 480rpx;
		height: 100rpx;
		overflow: hidden;
		white-space: nowrap;
		text-overflow: ellipsis;
		-o-text-overflow: ellipsis;
	}

	.deleBox {
		width: 630rpx;
		height: 60rpx;
		line-height: 60rpx;
		display: flex;
		justify-content: flex-end;
	}

	.dele {
		width: 140rpx;
		height: 60rpx;
		text-align: center;
		margin-top: 20rpx;
		border: 2rpx solid #999999;
		border-radius: 28rpx;
		font-size: 24rpx;
		color: #999999;
	}
	
	.dele2 {
		width: 140rpx;
		height: 60rpx;
		text-align: center;
		margin-top: 20rpx;
		border: 2rpx solid #006a00;
		border-radius: 28rpx;
		font-size: 24rpx;
		color: #006a00;
	}

	.textEnd {
		text-align: end;
		font-size: 20rpx;
		color: #999999;
	}

	.noBox {
		width: 630rpx;
		height: fit-content;
		margin: 30rpx auto 0 auto;
		display: flex;
		flex-wrap: wrap;
	}

	.noLi {
		width: 111rpx;
		height: 50rpx;
		display: flex;
		justify-content: center;
		align-items: center;
		margin-left: 15rpx;
	}

	.liImg {
		width: 30rpx;
		height: 30rpx;
	}

	.liTxt {
		width: 75rpx;
		height: 50rpx;
		line-height: 50rpx;
		text-align: center;
		font-size: 28rpx;
		color: #333333;
	}
</style>